<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>课程</title>
		<link rel="stylesheet" href="js/swiper/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/loaders.min.css" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link rel="stylesheet" type="text/css" href="css/base1.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="css/mui.css" />
		<script type="text/javascript" src="js/mui.js"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(window).load(function() {
				$(".loading").addClass("loader-chanage")
				$(".loading").fadeOut(300)
			})
		</script>
		<style type="text/css">
			#head {
				width: 100%;
				/*height: 30px;*/
			}
			
			#head ul {
				padding: 0;
				margin: 0;
				padding-top: 5px;
				padding-left: 5px;
				/*height: 450px;*/
			}
			
			#head ul li {
				list-style: none;
				float: left;
				text-decoration: none;
				display: block;
				margin-top: -4%;
				width: 12%;
				margin-left: 3.5%;
				margin-right: 3.5%;
				padding: 9px;
				position: relative;
				border: 1px solid #9E9E9E;
				border-radius: 15px;
				box-shadow: black 0 0 2px;
			}
			
			
		
			.prat {
				width: 100%;
				height: 160px;
				background-position: center;
				background-size: cover;
				/*border-radius: 10px;*/
			}
			
			.index_dl_01 {
				width: 45%;
				height: 240px;
				float: left;
				margin-left: 3%;
				background: #E6E6E6;
				margin-bottom: 5%;
				/*border-radius: 15px;*/
				margin-top: 4%;
				text-align: center;
				/*box-shadow: black 0 0 4px;*/
			}		
		</style>
	</head>

	<body>
<!--loading页开始-->
	<div class="loading">
		<div class="loader">
			<div class="loader-inner pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	<!--loading页结束-->

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"><font id="headerkeheng" class="fkc"></font></h1>
		</header>
		<div class="mui-content" id="main">
			<div id="head" style="height: 65px; margin-top: 5%;">
				<ul>
					<li id="L1"  style="text-align: center; height: 10%; background-color: deepskyblue;">
						<img src="images/b-iocn01.png" />
					</li>
					<li id="L2"  style="text-align: center; height: 10%; background-color: white;">
						<img src="images/b-iocn02.png" />
					</li>
					<li id="L3"  style="text-align: center; height: 10%; background-color: white;">
						<img src="images/b-iocn03.png" />
					</li>
					<li id="L4"  style="text-align: center; height: 10%; background-color: white;">
						<img src="images/b-iocn04.png" />
					</li>
				</ul>
			</div>
				<div id="d5" class="mui-content"></div>
				<div id="d1"></div>
				<div id="d2"></div>
				<div id="d3"></div>
				<div id="d4"></div>
		</div>
	<script>
		$(function(){
			//头部导航栏文字初始化
			var headerkeheng = document.getElementById("headerkeheng");
			var proclass = localStorage["proclass"];
			//alert(proclass);
			if(proclass<5){
				headerkeheng.innerHTML="课程";	
			}else if(proclass<9){
				headerkeheng.innerHTML="火鸡面面";
			}else if(proclass<13){
				headerkeheng.innerHTML="完美瑜伽";
			}else{
				headerkeheng.innerHTML="培训课程";
			}
			
			
			function click_href(obj){
				window.localStorage.proid=obj;
				//alert(localStorage["proid"]);
				var detail222 = plus.webview.create('detail222.html');
				detail222.show();
			}
			
			//预加载第一次查询
			$.post(localStorage["urlip"]+"shop/showProType.do",
			{pagenow:1,pagesize:4,protypeid:1},function(data){
				var dataObj=eval("("+data+")");   
				//var proidone = document.getElementById('proidone');
				var html='';
				for(var i=0;i<dataObj.length;i++){ 
					var a=i+1;
					html+="<dl class='index_dl_01'  onclick='click_href("+dataObj[i].proid+")'>"
						+"<a href='detail222.html?prodi='"+dataObj[i].proid+">"
						+"<dt><img class='prat' src='"+dataObj[i].proimg+"' /></dt>"
						+"<dd style='margin-top: -0px;'>"
						+"<span style='font-size: 15px;color: #000000;'>&nbsp;&nbsp;"+dataObj[i].proname +"</span>"
						+"<p></p>"
						+"<p style='color: red;>&nbsp;&nbsp;原价：¥"+dataObj[i].prooldprice+"4980.00<span style='color: #B6B6B6;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;库存0件</span></p>"
						+"</dd></a></dl>";						
	  	       		//alert(dataObj[i].proid+" "+dataObj[i].proname+" "+dataObj[i].prosite);
				}
		     	document.getElementById("d5").innerHTML=html;
			});
			
			var L1 = document.getElementById("L1");
			var L2 = document.getElementById("L2");
			var L3 = document.getElementById("L3");
			var L4 = document.getElementById("L4");
			var d1 = document.getElementById("d1");
			var d2 = document.getElementById("d2");
			var d3 = document.getElementById("d3");
			var d4 = document.getElementById("d4");
			var d5 = document.getElementById("d5");
	
		
			L1.addEventListener('tap',function(){
				d5.innerHTML = "";
				d2.innerHTML = "";
				d3.innerHTML = "";
				d4.innerHTML = "";
				
				L2.style.backgroundColor = "white";
				L4.style.backgroundColor = "white";
				L3.style.backgroundColor = "white";
				L1.style.backgroundColor = "deepskyblue";
				$( "#d1" ).load( "kecheng01.html", function( response, status, xhr ) {
					
					if(proclass<5){
						window.localStorage.proclass=1;	
					}else if(proclass<9){
						window.localStorage.proclass=5;
					}else if(proclass<13){
						window.localStorage.proclass=9;
					}else{
						window.localStorage.proclass=13;
					}
					$('#d1').html(response);
				});
			})
			L2.addEventListener('tap',function(){
				d5.innerHTML = "";
				d1.innerHTML = "";
				d3.innerHTML = "";
				d4.innerHTML = "";
				L4.style.backgroundColor = "white";
				L1.style.backgroundColor = "white";
				L3.style.backgroundColor = "white";
				L2.style.backgroundColor = "deepskyblue";
				$( "#d2" ).load( "kecheng01.html", function( response, status, xhr ) {
					if(proclass<5){
						window.localStorage.proclass=2;	
					}else if(proclass<9){
						window.localStorage.proclass=6;
					}else if(proclass<13){
						window.localStorage.proclass=10;
					}else{
						window.localStorage.proclass=14;
					}
			  		$('#d2').html(response);
				});
			})
			L3.addEventListener('tap',function(){	
				d5.innerHTML = "";
				d2.innerHTML = "";
				d1.innerHTML = "";
				d4.innerHTML = "";
				L2.style.backgroundColor = "white";
				L1.style.backgroundColor = "white";
				L4.style.backgroundColor = "white";
				L3.style.backgroundColor = "deepskyblue";
				$( "#d3" ).load( "kecheng01.html", function( response, status, xhr ) {
					if(proclass<5){
						window.localStorage.proclass=3;
					}else if(proclass<9){
						window.localStorage.proclass=7;
					}else if(proclass<13){
						window.localStorage.proclass=11;
					}else{
						window.localStorage.proclass=15;
					}
			  		$('#d3').html(response);
				});
			})
			L4.addEventListener('tap',function(){
				d5.innerHTML = "";
				d2.innerHTML = "";
				d3.innerHTML = "";
				d1.innerHTML = "";
				L2.style.backgroundColor = "white";
				L1.style.backgroundColor = "white";
				L3.style.backgroundColor = "white";
				L4.style.backgroundColor = "deepskyblue";
				$( "#d4" ).load( "kecheng01.html", function( response, status, xhr ) {
					if(proclass<5){
						window.localStorage.proclass=4;	
					}else if(proclass<9){
						window.localStorage.proclass=8;
					}else if(proclass<13){
						window.localStorage.proclass=12;
					}else{
						window.localStorage.proclass=16;
					}
			  		$('#d4').html(response);
				});
			})
		});
	</script>
	</body>
</html>